<template>
  <div class="image-node">
    <!-- 顶部连接点：source 和 target -->
    <Handle type="target" position="top" class="handle" id="top-target" />
    <Handle type="source" position="top" class="handle" id="top-source" />
    <!-- 左侧连接点：source 和 target -->
    <Handle type="target" position="left" class="handle" id="left-target" />
    <Handle type="source" position="left" class="handle" id="left-source" />
    <!-- 右侧连接点：source 和 target -->
    <Handle type="target" position="right" class="handle" id="right-target" />
    <Handle type="source" position="right" class="handle" id="right-source" />
    <!-- 底部连接点：source 和 target -->
    <Handle type="target" position="bottom" class="handle" id="bottom-target" />
    <Handle type="source" position="bottom" class="handle" id="bottom-source" />
    <!-- 节点本体 -->
    <div class="image-container">
      <img :src="imageSrc" alt="Image Node" class="node-image" />
    </div>
  </div>
</template>

<script setup>
import { Handle } from '@vue-flow/core'
import { computed } from 'vue'

defineProps({
  data: Object,
})

const imageSrc = computed(() => {
  return new URL('../imgs/Snipaste_2025-07-08_08-50-52.png', import.meta.url).href
})
</script>

<style scoped>
.image-node {
  position: relative;
  width: 100px; /* 调整为适合图片的尺寸 */
  height: 100px; /* 调整为适合图片的尺寸 */
  overflow: visible;
}

.image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #333; /* 添加边框与其它节点一致 */
  box-sizing: border-box;
}

.node-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片适配容器 */
}

.handle {
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}

:deep(.vue-flow__handle-top) {
  top: -10px; /* 移到外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-bottom) {
  bottom: -10px; /* 移到外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-left) {
  left: -10px; /* 移到外部 */
  top: 50%;
  transform: translateY(-50%);
}

:deep(.vue-flow__handle-right) {
  right: -10px; /* 移到外部 */
  top: 50%;
  transform: translateY(-50%);
}
</style>
